<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新建工单类型</title>
</head>
<body>
	<div th:fragment="main" id="addWorkOrderType">
	<style type="text/css">
		#addWorkOrderType{
	        width: auto;
		    padding: 20px 25px 10px 25px;
		    height: 100%;
		    background-color: #eaeaea;
		    overflow: auto;
		    color: #333;
		}
		.content-title{
		    color: #000;
		    font-size: 14px;
			padding-bottom: 20px;
		}
		.content-title span{
			cursor: pointer;
		}
		.content-bar{
			margin-top:50px; 
		}
		.content-bar .navbar-form{
			padding: 0 5px;
			margin: 0 auto;
		}
		.btn-cyan{
			color: #fff;
			background-color: rgba(26, 156, 178, 1);
			border-color: rgba(26, 156, 178, 1);
		}
		.btn-cyan:hover{
			color: #fff;
			background-color: rgba(25, 109, 123, 0.8);
			border-color: rgba(25, 109, 123, 1);
		}
		.btn-cyan:active{
			color: #fff;
			background-color: rgba(25, 109, 123, 1);
			border-color: rgba(25, 109, 123, 1);
		}
		.btn-cyan:focus{
			color: #fff;
			background-color: rgba(25, 109, 123, 1);
			border-color: rgba(25, 109, 123, 1);
		}
		.btn-bg{
			margin: 0 10px;
			padding: 7px 25px;
		}
		.footer{
			text-align: right;
    		margin-right: 20%;
		}
		#fileupload {
			display: none;
		}
		.form-label{
			width: 17%;
			float: left;
			text-align: right;
		    margin-bottom: 0;
		    padding-top: 7px;
	        padding-left: 15px;
    		padding-right: 15px;
		}
		.form-input{
			width: 25%;
			min-width: 100px;
			height: 34px;
			float: left;
		    padding: 6px 12px;
		    background-color: #fff;
		    border: 1px solid #c2cad8;
		    border-radius: 4px;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		}
		input.form-input[type=checkbox]{
			-webkit-box-shadow: none;
		    box-shadow: none;
		    width:16px;
		    min-width: 16px;
		    height:16px;
		    margin-top:9px;
		}
		.ico{
			float:left;
			margin-left:17%;
			width:64px;
			height:64px;
		}
		.uploadIco{
			color:#0000FF;
			margin-top: 8px;
			float:left;
			
		}
		.btn{
			border-radius: 0;
		}
		.uploadIco:hover{
			color:#000000;
		}
		textarea.form-input{
				height: auto;
		}
	</style>
	<link rel="stylesheet" th:href="@{/assets/jcDate/jcDate.css}">
		<div class="content-title">
	        <p><span>系统管理</span>&nbsp;>&nbsp;<span>新建工单类型</span></p>
	    </div>
	     <div class="content-bar">
			<form class="form-horizontal clearfix col-xs-offset-1">
				<div class="form-group">
					<label class="form-label" for="workOrderTypeName">工单类型名称&nbsp;:&nbsp;</label>
					<input type="text" id="workOrderTypeName" class="form-input" placeholder>
				</div>
				<div class="form-group">
					<label class="form-label" for="workOrderTypeDescription">备注&nbsp;:&nbsp;</label>
					<textarea id="workOrderTypeDescription" class="form-input" col="0" rows="4" placeholder></textarea>
				</div>
				<div class="form-group">
					<label class="form-label"  for="duplicateTaskFlag">是否可重复创建任务&nbsp;:&nbsp;</label>
					<input type="checkbox" value="1" id="duplicateTaskFlag" class="form-input" placeholder>
				</div>
				<div class="form-group">
					<label class="form-label" data-downPath="" id="workOrderTypeIcoFile" for="workOrderTypeIcoFile">图标&nbsp;:&nbsp;</label>
					<a type="text" onclick="appFile()"  id="uploadIco" class="uploadIco" >选择图标文件</a>
					<div id="uploads"></div>
				</div>
				<div class="form-group">
					<img id="ico" class="ico" src="">
				</div>
				<div class="form-group">
                    <!-- <input type="button" value="返回" class="btn btn-default pull-right cancel" id="cancel"> -->
                    <!-- <input type="button" value="保存" class="btn btn-primary pull-right save" id="save"> -->
                    <div class="footer">
	                    <a id="save" class="btn btn-cyan btn-bg" role="button">保存</a>
	                    <a id="cancel" class="btn btn-cyan btn-bg" href="#qualitycontrol-systemGroup-workOrderType" role="button">返回</a>
                    </div>
                </div>
                <input id="fileupload" accept=".jpg" type="file" name="file" th:attr="data-url=@{'/file/uploadImage/'}" multiple="multiple">
               </form>
		</div>
		<script th:src="@{/assets/jquery/plugins/jquery.ui.widget.js}"></script>
		<script th:src="@{/assets/jquery/plugins/jquery.iframe-transport.js}"></script>
		<script th:src="@{/assets/jquery/plugins/jquery.fileupload.js}" type="text/javascript"></script>
		
	<script>
	// 新建
           $('#save').on('click',function(){
            	if($("#workOrderTypeName").val().trim().length == 0){
            		toastr.error("工单类型名称不得为空！");
            		return;
            	}
            	if($("#workOrderTypeName").val().trim().length > 25){
            		toastr.error("工单类型名称不得超过25个字符！");
            		return;
            	}
            	if($("#workOrderTypeIcoFile").attr("data-downPath").length == 0){
            		toastr.error("工单类型图标不得为空！");
            		return;
            	}
            	if($("#workOrderTypeDescription").val().trim().length > 250){
            		toastr.error("备注信息不得超过250个字符！");
            		return;
            	}
        				var formData = {
        						"description": $("#workOrderTypeDescription").val().trim(),
        	                    "name": $("#workOrderTypeName").val().trim(),
        	                    "iconFile": $("#workOrderTypeIcoFile").attr("data-downPath"),
								"duplicateTaskFlag":$('#duplicateTaskFlag').is(':checked')
        					}
        				
        				$.ajax({
                            url: contextPath + '/WorkOrderType/createWorkOrderType',
                            type: 'POST',
                            data: JSON.stringify(formData),
                            cache : false,
                            contentType: "application/json",
                            success: function (D) {
                            	if(D.code == 1){
                            		console.log(1)
                                	toastr.success("新建工单类型，保存成功!");
                                	console.log(D)
                                	location.hash = "#qualitycontrol-systemGroup-workOrderType";
                            	}
                            	else{
                            		toastr.error(D.message);
                            	}
                            },
                            error: function (D) {
                       		 	toastr.error(D.message);
                            }
                        });
        	   	});
                
                
                   
			
         //上传图片
           function appFile(){
				var upFiles = $(".upfile");
				
				//获取选择的 img.attr
				upFiles.each(function(index,element){
					console.log($(element).attr('attr'));
				});
				
				if(upFiles.length == 1){
					toastr.error("只能上传一个图片 ！", "图片上传");
				}else{
					$('input[id=fileupload]').click();
				}
			}
           $('#fileupload').fileupload({
           	singleFileUploads : true,
				dataType : 'json',	
				done : function(e, data) {
					if (data.result.code == 1) {
						console.log(data.result.data)
						var filepath = data.result.data;
						$('#ico').attr("src", data.result.data.downPath);
						$('#workOrderTypeIcoFile').attr("data-downPath", data.result.data.downPath);
					} 
					else{
						toastr.error(data.result.message);
					}
					console.log(data.result);
					
				}
			});
         
            // 取消
            $('#cancel').on('click',function(){
				$('#add_form')[0].reset();
			});
       </script>
</body>
</html>
				
